<template>
	<s-layout title="会员管理">
		<su-sticky bgColor="#fff">
			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="search" />
		</su-sticky>
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id" @click="toDetail(item.id)">
				<image :src="item.avatar" alt="" class="avatar" />
				<view class="info">
					<view class="user">
						<text>{{item.username}}</text>
						<text class="vip"> VIP{{item.level}} </text>
					</view>
					<view>
						<uni-icons type="phone" size="16" color="#666"/>
						<text class="tel">{{item.mobile || '未绑定'}}</text>
					</view>
					<view class="balance">
						<view>
							<text>余额：</text>
							<text class="num">{{item.money}}</text>
						</view>
						<view>
							<text>积分：</text>
							<text class="num">{{item.score}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>

		<!-- <view class="add-btn">
			<button class="ss-reset-button ui-Shadow-Main" @tap="toAddMember">
				<uni-icons type="plusempty" size="20" color="#fff"/>
			</button>
		</view> -->
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const state = reactive({
		keyword: "",
		list: [],
		page: 1,
		pageSize: 20,
		loadStatus: 'noMore',
	})

	function toAddMember(){
		sheep.$router.go('/manage/pages/member/add')
	}

	function toDetail(id){
		sheep.$router.go('/manage/pages/member/detail',{id})
	}

	function search(e) {
		state.keyword = e.value;
		emptyList();
		getList();
	}

	async function getList() {
		state.loadStatus = 'loading';
		const info = {
			keyword: state.keyword,
			p: state.page,
			pagesize: state.pageSize
		}
		const res = await sheep.$mapi.member.memberList(info);
		if (res.code === 1) {
			let newArr = res.data
			let initArr = state.list ? state.list : []
			const lastListNum = newArr.length
			if (state.page == 1) {
				state.list = res.data
			} else {
				state.list = initArr.concat(newArr)
			}
			if (lastListNum < state.pageSize) {
				state.loadStatus = 'noMore';
			} else {
				state.loadStatus = 'more';
			}
		}
	}

	function emptyList() {
		state.page = 1;
		state.list = [];
		state.loadStatus = 'noMore';
	}

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			state.page++;
			getList();
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});

	onLoad((options) => {
		getList();
	});
</script>

<style lang="scss" scoped>
	.content {
		padding: 28rpx;

		.card {
			display: flex;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 28rpx;
			margin-bottom: 24rpx;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				border-radius: 100%;
				margin-right: 30rpx;
				background-color: #ccc;
				overflow: hidden;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				>view {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666666;
				}

				.user {
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;

					.vip {
						padding: 5rpx;
						background: linear-gradient(95deg, #FFD48E 0%, #FFF2E1 46%, #FFD48E 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1rpx solid #D5CBB3;
						font-weight: 400;
						font-size: 20rpx;
						color: #351F07;
						margin-left: 15rpx;
					}
				}

				.tel{
					margin-left: 10rpx;
				}

				.balance{
					>view{
						margin-right: 20rpx;
					}
					.num{
						color:#333333;
						font-weight: 500;
					}
				}
			}
		}
	}

	.add-btn{
		position: fixed;
		bottom:100rpx;
		right:20rpx;
		button{
			background: linear-gradient( 90deg, #6780FF 0%, #3A43FF 100%);
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
</style>
